<template>
	<view class="">
		<view class="" v-for="(item,index) in arr" :key="index">
			<view class="daiyu">
				{{item.name}}
			</view>
			<view class="biaoqianbox">
				<view :class="items.check ? 'slectbiaoqian':'biaoqian'"
					v-for="(items,indexs) in item.attr_value" :key="indexs" @click="xuanzhe(index, indexs,item)">
					{{items.name}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			arr:{type:Array}
		},
		data() {
			return {
				selectbiaoqian: [],
			}
		},
		methods: {
			// 标签选择
			xuanzhe(id1, id2,v) {
				this.$emit('confirm', {id1: id1, id2: id2,v:v})
			}
		}
	}
</script>

<style scoped lang="scss">
	.daiyu {
		font-family: SourceHanSansCN-Bold;
		font-size: 28rpx;
		color: #000000;
		font-weight: 700;
		margin-top: 45rpx;
	}

	.biaoqianbox {
		display: flex;
		flex-wrap: wrap;
		margin-left: 20rpx;
		margin-top: 30rpx;

		.biaoqian {
			// width: 118rpx;
			height: 60rpx;
			background-color: #f2f2f2;
			border: solid 2rpx #f2f2f2;
			padding-left: 10rpx;
			padding-right: 10rpx;
			box-sizing: border-box;
			border-radius: 10rpx;
			line-height: 60rpx;
			text-align: center;
			font-family: PingFang-SC-Medium;
			font-size: 26rpx;
			color: #333333;
			margin-right: 15rpx;
			margin-bottom: 30rpx;
		}

		.slectbiaoqian {
			padding-left: 10rpx;
			padding-right: 10rpx;
			box-sizing: border-box;
			height: 60rpx;
			background-color: #fff5f5;
			border-radius: 10rpx;
			border: solid 2rpx #ff3333;
			line-height: 60rpx;
			text-align: center;
			margin-right: 15rpx;
			margin-bottom: 30rpx;
			color: #ff3333;
			font-family: PingFang-SC-Medium;
			font-size: 26rpx;
		}

	}
</style>
